<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*
 * Shake Animation from "CSShake" by Lionel T
 * http://codepen.io/elrumordelaluz/pen/pHKcC
 */
        /*
         * Styles
         */

        @keyframes shake-base {
            0% {
                transform: translate(0px, 0px) rotate(0deg);
            }
            2% {
                transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
            }
            4% {
                transform: translate(1.5px, 1.5px) rotate(1.5deg);
            }
            6% {
                transform: translate(2.5px, 2.5px) rotate(0.5deg);
            }
            8% {
                transform: translate(0.5px, -1.5px) rotate(-0.5deg);
            }
            10% {
                transform: translate(-0.5px, 2.5px) rotate(0.5deg);
            }
            12% {
                transform: translate(-1.5px, 2.5px) rotate(0.5deg);
            }
            14% {
                transform: translate(1.5px, 2.5px) rotate(1.5deg);
            }
            16% {
                transform: translate(1.5px, 2.5px) rotate(0.5deg);
            }
            18% {
                transform: translate(-0.5px, 1.5px) rotate(0.5deg);
            }
            20% {
                transform: translate(2.5px, -0.5px) rotate(0.5deg);
            }
            22% {
                transform: translate(0.5px, -1.5px) rotate(1.5deg);
            }
            24% {
                transform: translate(-0.5px, 2.5px) rotate(0.5deg);
            }
            26% {
                transform: translate(-1.5px, -1.5px) rotate(1.5deg);
            }
            28% {
                transform: translate(0.5px, 1.5px) rotate(0.5deg);
            }
            30% {
                transform: translate(1.5px, -1.5px) rotate(0.5deg);
            }
            32% {
                transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
            }
            34% {
                transform: translate(1.5px, -0.5px) rotate(-0.5deg);
            }
            36% {
                transform: translate(1.5px, -1.5px) rotate(1.5deg);
            }
            38% {
                transform: translate(-0.5px, 2.5px) rotate(0.5deg);
            }
            40% {
                transform: translate(2.5px, 2.5px) rotate(0.5deg);
            }
            42% {
                transform: translate(-1.5px, 1.5px) rotate(1.5deg);
            }
            44% {
                transform: translate(0.5px, 0.5px) rotate(0.5deg);
            }
            46% {
                transform: translate(2.5px, 2.5px) rotate(-0.5deg);
            }
            48% {
                transform: translate(1.5px, -1.5px) rotate(-0.5deg);
            }
            50% {
                transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
            }
            52% {
                transform: translate(0.5px, 0.5px) rotate(1.5deg);
            }
            54% {
                transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
            }
            56% {
                transform: translate(-1.5px, -1.5px) rotate(1.5deg);
            }
            58% {
                transform: translate(1.5px, 1.5px) rotate(0.5deg);
            }
            60% {
                transform: translate(2.5px, 2.5px) rotate(0.5deg);
            }
            62% {
                transform: translate(1.5px, -1.5px) rotate(0.5deg);
            }
            64% {
                transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
            }
            66% {
                transform: translate(1.5px, 2.5px) rotate(-0.5deg);
            }
            68% {
                transform: translate(0.5px, 1.5px) rotate(1.5deg);
            }
            70% {
                transform: translate(0.5px, -0.5px) rotate(-0.5deg);
            }
            72% {
                transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
            }
            74% {
                transform: translate(-0.5px, 0.5px) rotate(1.5deg);
            }
            76% {
                transform: translate(0.5px, -1.5px) rotate(1.5deg);
            }
            78% {
                transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
            }
            80% {
                transform: translate(2.5px, -1.5px) rotate(0.5deg);
            }
            82% {
                transform: translate(1.5px, 1.5px) rotate(1.5deg);
            }
            84% {
                transform: translate(2.5px, 1.5px) rotate(0.5deg);
            }
            86% {
                transform: translate(-1.5px, 0.5px) rotate(1.5deg);
            }
            88% {
                transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
            }
            90% {
                transform: translate(1.5px, 1.5px) rotate(-0.5deg);
            }
            92% {
                transform: translate(0.5px, 0.5px) rotate(0.5deg);
            }
            94% {
                transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
            }
            96% {
                transform: translate(2.5px, -1.5px) rotate(1.5deg);
            }
            98% {
                transform: translate(0.5px, -0.5px) rotate(-0.5deg);
            }
        }
        body,
        html {
            width: 100%;
            height: 100%;
        }
        body {
            background: white;
            font-family: sans-serif;
        }
        .group {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -184.5px;
            margin-left: -130px;
            width: 260px;
            height: 369px;
        }
        .group.shake {
            animation-name: shake-base;
            animation-duration: 100ms;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-delay: 0s;
        }
        .group.shake .eye {
            width: 45%;
            -webkit-filter: invert(1);
        }
        .group.shake .steam {
            animation: steam 4s linear infinite;
        }
        .titan {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .shadow {
            position: absolute;
            top: 190px;
            left: 101px;
        }
        .area {
            position: absolute;
            top: 180px;
            left: 90px;
            width: 80px;
            height: 55px;
        }
        .eye {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.2s;
            transform: translate(25px, 10px);
        }
        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: 200px;
            margin-left: -100px;
            width: 200px;
            padding: 5px 0;
            background: linear-gradient(to bottom, #260904, #ec3500) repeat-x 0 0/100% 200%;
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
            text-shadow: 0 0 2px black;
            color: white;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            transition: all 0.3s;
        }
        .btn:hover {
            background-position: 0 100%;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
        }
        .steam {
            position: absolute;
            opacity: 0;
        }
        @keyframes steam {
            0% {
                opacity: 0;
                transform: translate(0%, 50%);
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translate(0%, -100%);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div id="wrapper" class="group">
    <div id="area" class="area">
        <img id="eye" src="img/Eb0Eaoe.png" class="eye" />
    </div>
    <img id="titan" src="img/go6zBE5.png" class="titan" />
    <img src="img/M2yZuFY.png" class="shadow" />
    <img id="steam" src="img/9zCCYGL.png" class="steam" />
</div>
<div id="btn" class="btn">HOVER</div>
</body>
</html>

<script>
    (function() {
        var EyeTracker, eyeTracker, __bind = function(fn, me) {
            return function() {
                return fn.apply(me, arguments);
            };
        };
        EyeTracker = function() {
            function EyeTracker() {
                this.cooldown = __bind(this.cooldown, this);
                this.excited = __bind(this.excited, this);
                this.trackMouseByPercent = __bind(this.trackMouseByPercent, this);
            }
            EyeTracker.prototype.init = function() {
                this.area = {};
                this.area.$el = document.querySelector('#area');
                this.area.data = this.area.$el.getBoundingClientRect();
                this.eye = {};
                this.eye.$el = document.querySelector('#eye');
                this.eye.data = this.eye.$el.getBoundingClientRect();
                this.btn = document.querySelector('#btn');
                this.wrapper = document.querySelector('#wrapper');
                this.range = {
                    min: {
                        x: this.area.data.left + this.eye.data.width / 2,
                        y: this.area.data.top + this.eye.data.height / 2
                    },
                    max: {
                        x: this.area.data.right - this.eye.data.width / 2,
                        y: this.area.data.bottom - this.eye.data.height / 2
                    }
                };
                this.translate = {
                    min: {
                        x: 0,
                        y: 0
                    },
                    max: {
                        x: this.range.max.x - this.range.min.x,
                        y: this.range.max.y - this.range.min.y
                    }
                };
                this.w = window.innerWidth;
                this.h = window.innerHeight;
                this.x = 0;
                this.y = 0;
                this.x2 = 0;
                this.y2 = 0;
                return this.bindEvents();
            };
            EyeTracker.prototype.bindEvents = function() {
                document.addEventListener('mousemove', this.trackMouseByPercent, false);
                this.btn.addEventListener('mouseover', this.excited, false);
                return this.btn.addEventListener('mouseleave', this.cooldown, false);
            };
            EyeTracker.prototype.trackMouseByPercent = function(e) {
                this.x2 = Math.round(e.clientX / this.w * this.translate.max.x);
                this.y2 = Math.round(e.clientY / this.h * this.translate.max.y);
                return this.eye.$el.style.transform = 'translate(' + this.x2 + 'px,' + this.y2 + 'px)';
            };
            EyeTracker.prototype.excited = function() {
                return this.wrapper.classList.add('shake');
            };
            EyeTracker.prototype.cooldown = function() {
                return this.wrapper.classList.remove('shake');
            };
            return EyeTracker;
        }();
        eyeTracker = new EyeTracker();
        eyeTracker.init();
    }.call(this));
</script>